<template>
    <div style="background-color: #F5F5F5;">

        <el-container style="width: 70%;margin: 0 auto;">

            <el-header style="background-color:#8FC0A9;height: 65px;display: flex">
                <div @click="goBack">
                    <h3><i class="el-icon-back"></i>返回</h3>
                </div>
                <div >
                    <img :src=logoImage style="width: 100px;height: 65px;margin-left: 20px">
                </div>

                <div style="margin-left: 700px" @click="goUser">
                    <h3><i class="el-icon-s-custom"></i>个人中心</h3>
                </div>
            </el-header>

            <el-main style="height: 1100px;background-color:#FAF3DD;padding: 80px">

                <div style="margin: 0 auto;text-align: center">
                    <h3>{{post.postHead}}</h3>

                    <div style="text-align: center;">
                        <el-divider></el-divider>

                        <h5><i class="el-icon-chicken"></i>点赞数：{{post.postLikes}}</h5>
                        <h5>类型：手工制作</h5>
                        <div >
                            <img :src=post.postImage style="height: 400px;width: 300px;">
                        </div>
                        <div style="padding: 50px;width: 70%;margin: 0 auto;line-height: 40px">
                            <p>{{post.postContext}}</p>
                        </div>


                    </div>
                </div>

                <div style="margin-top: 30px">
                    <h3>评论区：</h3>
                    <el-divider></el-divider>
                    <div v-for="(item,id) in comments" :key="id" style="background-color: #FAF3DD;">
                        <div style="display:flex;">
                            <el-avatar :src="item.commentImage" style="margin-top: 20px;"></el-avatar>
                            <div style="margin-left: 10px">
                                <h4>{{item.commentUsername}}</h4>
                                <p>{{item.commentContext}}</p>
                            </div>
                        </div>

                        <el-divider></el-divider>
                    </div>
                    <div>
                        <el-input v-model="myComment"></el-input>
                        <el-button type="success" style="margin-top: 20px;float: right">确定</el-button>
                    </div>
                </div>
            </el-main>


            <Footer></Footer>
        </el-container>
    </div>

</template>

<script>
    import Footer from "../components/Footer";

    export default {
        name: "PostDetail",
        components:{
            Footer,
        },
        data(){
            return{
                postIdCurrently:null,
                logoImage:require("../assets/bgc/logo.png"),
                num:1,
                drawer: false,
                drawer1:false,
                myComment:'评论',
                post:{
                    postid: '',
                    postHead: null,
                    postContext: '',
                    postClass: null,
                    postImage: '',
                    postVerify:'',
                    postLikes:'',
                    postAuthorid:null,
                },
                comments:[

                ],
                comment:{
                    commentUserid: 1,
                    commentContext: "okkkkkk",
                    commentLikes: 15,
                    commentImage: "3.jpg",
                    commentUsername:"",
                },
                user:{
                    userName:'',
                    userImage:'',
                    balance:null,
                    place:'',
                }
            }
        },
        methods:{
            getGoodsDetail(){
                console.log("开始发送请求。。。")
                this.$http({
                    url:'http://localhost:8083/forum/showOnePost',
                    method:'POST',
                    params:{
                        "postID":this.postIdCurrently
                    }
                }).then(res=>{
                    console.log(res)
                    this.post = res.data.post;
                    this.post.postImage = require("../assets/forumImage/"+ res.data.post.postImage);
                    console.log(this.post);

                    for (let i in res.data.comment){
                        this.comment = res.data.comment[i];
                        this.comment.commentImage = require("../assets/bgc/" + res.data.comment[i].commentImage);
                        this.comments.push(this.comment);
                    }
                    console.log(this.comments)

                }).catch(error=>{
                    console.log(error);
                })
            },

            getParams(){
                this.postIdCurrently = localStorage.getItem("postId");
                console.log(this.postIdCurrently);
            },

            goBack(){
                this.$router.push("/forum");
            },

            goUser(){
              this.$router.push("/user")
            },

            handleChange(value) {
                console.log(value);
            },

            showAuthor(){
                this.drawer = true;
                this.getUser();
            },

            getUser(){
                this.$http({
                    method:'POST',
                    url:"http://localhost:8083/user/userDetail",
                    params:{
                        "userId":this.post.postAuthorid
                    }
                }).then(res=>{
                    console.log(res);
                    this.user = res.data;
                    this.user.userImage = require("../assets/bgc/"+ res.data.userImage);
                    console.log(this.user);
                }).catch(error=>{
                    console.log(error);
                })
            },

            openShoppingCar(){
                this.drawer1 = true;

            },

            submitOrder(){
                this.$http({
                    method:'POST',
                    url:'http://localhost:8083/goods/',
                    params:{

                    }
                }).then(res=>{
                    console.log(res.data);
                }).catch(error=>{
                    console.log(error);
                })
            },

            buyNow(){
                this.$router.push("/CreateOrder");
            },

            carAdd(){

                this.$notify({
                    title: '添加购物车成功',
                    message: '这是一条成功的提示消息',
                    type: 'success'
                });
            },

            goToChat(){
                this.$router.push("/chat");
            }

        },

        created() {
            this.getParams();
            this.getGoodsDetail();
        },

        destroyed() {
            localStorage.removeItem("postId");
        },


    }
</script>

<style scoped>

</style>